<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<header>
    <ul>
        <li>首页</li>
        <li>Class属性、复制元素</li>
        <li>DOM插入、插入现有内容</li>
        <li><a href="./Lisai.html"> DOM插入元素内、外</a></li>
        <li>DOM移除、替换</li>
        <li>通用属性、CSS属性</li>
    </ul>
</header>
<div class="container main">
    <div class="container main-1">
        <h1>一、DOM移除、替换</h1>
        <h2>1、detach()方法</h2>
        <p>
            detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
        </p>
        <p>
            该方法会保留移除元素的副本，允许它们在以后被重新插入。
        </p>
        <div class="main-1-img">
            <img src="./img/detach-1.png" alt=""/>
            <br/>
            <img src="./img/detach-2.png" alt=""/>
            <img src="./img/detach-3.png" alt=""/>
        </div>
    </div>
    <div class="container main-1">
        <h2>2、empty() 方法</h2>
        <p>
            从DOM中移除集合中匹配元素的所有子节点。

        </p>
        <div class="main-1-img">
            <img src="./img/empty-1.png" alt=""/>
            <img src="./img/empty-2.png" alt=""/>
            <img src="./img/empty-3.png" alt=""/>
        </div>
    </div>
    <div class="container main-1">
        <h2>3、remove() 方法</h2>
        <p>
            remove() 方法移除被选元素，包括所有的文本和子节点。
        </p>
        <div class="main-1-img">
            <img src="./img/remove-1.png" alt=""/>
            <img src="./img/remove-2.png" alt=""/>
            <img src="./img/remove-3.png" alt=""/>
        </div>
    </div>
    <div class="container main-1">
        <h2>4、replaceAll() 方法</h2>
        <p>
            replaceAll() 方法吧被选元素替换为新的 HTML 元素
        </p>
        <div class="main-1-img">
            <img src="./img/replaceall-1.png" alt=""/>
            <img src="./img/replaceall-2.png" alt=""/>
            <img src="./img/replaceall-3.png" alt=""/>
        </div>
    </div>
    <div class="container main-1">
        <h2>5、replaceWith() 方法</h2>
        <p>
            replaceWith() 方法把被选元素替换为新的内容
        </p>
        <div class="main-1-img">
            <img src="./img/replacewith-1.png" alt=""/>
            <img src="./img/replacewith-2.png" alt=""/>
            <img src="./img/replacewith-3.png" alt=""/>
        </div>
        <h3>提示：</h3>
        <p><strong>replaceAll（）方法是替换元素及其内容</strong></p>
        <p><strong>ReplaceWith（）方法仅仅替换原来元素的内容</strong></p>
    </div>

</div>
</body>
</html>